<template>
    <!--面包屑-->
    <el-row>
        <div class="breadcrumb">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item to="/">主页</el-breadcrumb-item>
                <el-breadcrumb-item to="/wisdomeat">智慧食堂</el-breadcrumb-item>
                <el-breadcrumb-item>商家入驻</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
    </el-row>
    <h1 style="margin-left: 720px">商家注册</h1>
    <el-row>
        <el-card class="infocard">
            <template #header>
                <h2 align="center">注册个人信息</h2>
            </template>
            <el-form label-width="90px" :model="registerForm" :rules="rules" ref="registerForm">
                <el-form-item label="商家账号" prop="bNumber">
                    <el-input  type="text"
                               placeholder="请输入用户名"
                               v-model="registerForm.bNumber"
                    ></el-input>
                </el-form-item>
                <el-form-item label="商家密码" prop="bPassword">
                    <el-input  type="password"
                               placeholder="请输入密码"
                               v-model="registerForm.bPassword"
                    ></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="bCheckPassword">
                    <el-input  type="password"
                               placeholder="请确认密码"
                               v-model="registerForm.bCheckPassword"
                    ></el-input>
                </el-form-item>
                <el-form-item label="账号昵称" prop="bName">
                    <el-input  type="text"
                               placeholder="请输入昵称"
                               v-model="registerForm.bName"
                    ></el-input>
                </el-form-item>
                <el-form-item label="商家电话" prop="bPhone">
                    <el-input  type="text"
                               placeholder="请输入手机号"
                               v-model="registerForm.bPhone"
                    ></el-input>
                </el-form-item>
                <el-form-item label="商家地址" prop="bAddress">
                    <el-input  type="text"
                               placeholder="请输入地址"
                               v-model="registerForm.bAddress"
                    ></el-input>
                </el-form-item>
                <el-form-item class="button-group">
                    <el-button type="success" @click="btnRegisterClick" style="width: 100px;">注册</el-button>
                    <el-button type="primary" @click="btnCancelClick" style="width: 100px;">
                      返回
                    </el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </el-row>
</template>

<script>
import axios from "axios";
import {ElMessage} from "element-plus";

export default {
    name: "BusinessRegister",
    data() {
        return {
            registerForm: {
                bNumber:'',
                bName:'',
                bPassword:'',
                bCheckPassword:'',
                bPhone:'',
                bAddress:''
            },
            rules: {
                bNumber: [{required: true, message: '用户名不得为空', trigger: 'blur'}],
                bPassword: [{required: true, message: '密码不得为空', trigger: 'blur'}],
                bCheckPassword: [{
                    required: true,
                    message: '密码不得为空',
                    trigger: 'blur'
                }, {validator: this.validatePassword, trigger: 'blur'}],
                bPhone: [{required: true, message: '手机号不得为空', trigger: 'blur'}],
                bName: [{required: true, message: '昵称不得为空', trigger: 'blur'}],
                bAddress: [{required: true, message: '地址不得为空', trigger: 'blur'}],
            }
        }
    },
    methods: {
        btnRegisterClick() {
            this.$refs.registerForm.validate(valid => {
                if (valid) {
                    axios({
                        url:'http://localhost:8888/business/register',
                        method:'post',
                        params:{
                            bNumber:this.registerForm.bNumber,
                            bPhone:this.registerForm.bPhone,
                            bPassword:this.registerForm.bPassword,
                            bName:this.registerForm.bName,
                            bAddress:this.registerForm.bAddress
                        }
                    }).then((res)=>{
                        if(res.data.success){
                            ElMessage.success({
                                message:'注册成功,请等待审核',
                                duration:1000,
                            })
                        }else {
                            ElMessage.error({
                                message:'注册失败',
                                duration:1000,
                            })
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        validatePassword(rule, value, callback) {
            if (value === '') {
                callback(new Error('密码不得为空'));
            } else if (value !== this.registerForm.bPassword) {
                callback(new Error('两次输入的密码不一致!'));
            } else {
                callback();
            }
        },
        btnCancelClick(){
            this.$router.push('/wisdomeat')
        }
    }
}
</script>

<style scoped>
.infocard {
    width: 800px;
    margin-left: 380px;
}

.breadcrumb {
    padding: 10px;
}

.button-group {
    margin-left: 150px;
    margin-top: 20px;
}
</style>